<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="../css/main.css" />
    <noscript><link rel="stylesheet" href="../css/noscript.css" /></noscript>
</head>
<body>
<div th:replace="common/top">

</div>

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<canvas id="canvas" width="1920" height="950"></canvas>
<style>canvas {
    display: block;
    /*position: relative;*/
    z-index: 1;
    pointer-events: none;
    position: fixed;
    top: 0;
}</style>
<!--<script src="../js/confetti.js"></script>-->

<!--<div id="BackLink">-->
<!--    <a href="main">Return to Main Menu</a>-->
<!--    <script type="text/javascript">-->
<!--        $(document).ready(function(){-->
<!--            $("#Catalog").hide().fadeIn();-->
<!--        });-->
<!--    </script>-->
<!--</div>-->

<div id="Catalog">

    <br>
    <br>
    <br>
    <form id="payment" action="/order/payment" method="post">
    <table>
        <tr>
            <th colspan="2">orderId:</th>
        </tr>
        <tr>
            <td th:text="${session.order.orderId}">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input id="orderId" name="orderId" hidden="hidden" th:value="${session.order.orderId}" />
            </td>
        </tr>
        <tr>
            <th colspan="2">orderDate:</th>
        </tr>
        <tr>
            <td colspan="2" th:text="${#dates.format(session.order.orderDate, 'yyyy-MM-dd HH:mm')}">money</td>
        </tr>
        <tr>
            <th colspan="2">Payment Details</th>
        </tr>
        <tr>
            <td>Card Type:</td>
            <td th:text="${session.order.cardType}" >Card</td>
        </tr>
        <tr>
            <td>Card Number:</td>
            <td th:text="${session.order.creditCard}" > * Fake
                number</td>
        </tr>
        <tr>
            <td>Expiry Date (MM/YYYY):</td>
            <td th:text="${session.order.expiryDate}" ></td>
        </tr>
        <tr>
            <th colspan="2">Billing Address</th>
        </tr>
        <tr>
            <td>First name:</td>
            <td th:text="${session.order.billToFirstName}" ></td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td th:text="${session.order.billToLastName}" ></td>
        </tr>
        <tr>
            <td>Address 1:</td>
            <td th:text="${session.order.billAddress1}" ></td>
        </tr>
        <tr>
            <td>Address 2:</td>
            <td th:text="${session.order.billAddress2}" ></td>
        </tr>
        <tr>
            <td>City:</td>
            <td th:text="${session.order.billCity}" ></td>
        </tr>
        <tr>
            <td>State:</td>
            <td th:text="${session.order.billState}" ></td>
        </tr>
        <tr>
            <td>Zip:</td>
            <td th:text="${session.order.billZip}" ></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td th:text="${session.order.billCountry}" ></td>
        </tr>
        <tr>
            <th colspan="2">Shipping Address</th>
        </tr>
        <tr>
            <td>First name:</td>
            <td th:text="${session.order.shipToFirstName}" ></td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td th:text="${session.order.shipToLastName}" ></td>
        </tr>
        <tr>
            <td>Address 1:</td>
            <td th:text="${session.order.shipAddress1}" ></td>
        </tr>
        <tr>
            <td>Address 2:</td>
            <td th:text="${session.order.shipAddress2}" ></td>
        </tr>
        <tr>
            <td>City:</td>
            <td th:text="${session.order.shipCity}" ></td>
        </tr>
        <tr>
            <td>State:</td>
            <td th:text="${session.order.shipState}" ></td>
        </tr>
        <tr>
            <td>Zip:</td>
            <td th:text="${session.order.shipZip}" ></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td th:text="${session.order.shipCountry}" ></td>
        </tr>
        <tr>
            <td>Courier:</td>
            <td th:text="${session.order.courier}" ></td>
        </tr>
        <tr>
            <td>Status:</td>
            <td th:text="${session.order.status}" ></td>
        </tr>
        <tr>
            <td colspan="2">
                <table>
                    <tr>
                        <th>Item ID</th>
                        <th>Description</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Total Cost</th>
                    </tr>
                    <section th:each="lineItem:${session.order.lineItems}">
<!--                    <c:forEach var="lineItem" items="${order.lineItems}">-->
                        <tr>
                            <td>
                                <a th:href="@{/catalog/viewItem(itemId=${lineItem.item.itemId})}" th:text="${lineItem.item.itemId}">itemId</a>
                            </td>
                            <td>
                                <p th:if ="${lineItem.item} ne null">
                                <p th:text="${lineItem.item.attribute1}"></p>
<!--                                    ${lineItem.item.attribute1}-->
<!--                                    ${lineItem.item.attribute2}-->
<!--                                    ${lineItem.item.attribute3}-->
<!--                                    ${lineItem.item.attribute4}-->
<!--                                    ${lineItem.item.attribute5}-->
<!--                                    ${lineItem.item.product.name}-->
                                </p>
                        <p th:if ="${lineItem.item} eq null">
<!--                                <tr test="${lineItem.item == null}">-->
                                    <i >{description unavailable}</i>
                                </p>
                            </td>

                            <td th:text="${lineItem.quantity}" >quantity</td>

                        <td th:text="'$'+${#numbers.formatDecimal(lineItem.unitPrice,1,'COMMA',2,'POINT')}">money</td>
<!--                            <fmt:formatNumber value="${lineItem.unitPrice}"-->
<!--                                                  pattern="$#,##0.00" />-->

                        <td th:text="'$'+${#numbers.formatDecimal(lineItem.total,1,'COMMA',2,'POINT')}">money</td>
<!--                            <td><fmt:formatNumber value="${lineItem.total}"-->
<!--                                                  pattern="$#,##0.00" /></td>-->
                        </tr>
<!--                    </c:forEach>-->
                    </section>
                    <tr>
                        <td colspan="5">Total:</td>
                    </tr>
                    <tr>
                        <td   th:text="'$'+${#numbers.formatDecimal(session.order.totalPrice,1,'COMMA',2,'POINT')}" >
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="submit"   name="payment" value="Pay"  onclick="payment()" />
                        </td>
                        <td>
                            <input hidden="hidden" id="totalprice"  name="totalprice" th:value="${session.order.totalPrice}"/>
                        </td>

                    </tr>


                </table>
            </td>
        </tr>

    </table>
    </form>
</div>
<script type="text/javascript">
    function payment() {
        $("#paymentForm").submit();
    }
</script>

<!--<%@ include file="../common/IncludeBottom.jsp"%>-->
<div th:replace="common/bottom">
</div>

</body>
</html>